<template>
  <div>
<!--    一个面包屑导航-->
    <div class="crumbs">
      <h2>合同领用</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>合同领用
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="handleEdit('add')"
        >合同录入</el-button>
<!--        时间段、指定年月、合同类型、律师姓名查询、合同领用记录（含注销的合同）-->
        <!-- 一、日期范围选择器：
             el-date-picker：Element UI的日期选择器组件核心标签
             v-model="query.dataPink":双向数据绑定，选择的日期范围会被存储在query.dataPink中（通常是数组，格式：[开始日期，结束日期]）
             type="daterange":指定类型为“日期范围选择”，区别于单个选择
             align="right"：日期选择面板对齐方式为右对齐
             unlink-panels:取消日期联动，默认情况结束日期大于开始日期，开启此属性则可以自由选择
             @blur="handleBlur":当日期选择器失去焦点时，触发handleBlur方法
        -->
        <el-date-picker
          ref="dataPicker"
          v-model="query.dataPink"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          @blur="handleBlur">
        </el-date-picker>

        <!--二、 合同类型 下拉选择框
        label：下拉框中显示的文本内容
        value：选项被选中后，绑定到父组件v-model中的值，也就是实际业务中使用的数据
        -->
        <el-select v-model="query.contractType" placeholder="合同类别" class="handle-select mr10" style="width: 130px">
          <el-option key="" label="全部" value=""></el-option>
          <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
          <el-option key="2" label="民事案件" value="民事案件"></el-option>
          <el-option key="3" label="行政案件" value="行政案件"></el-option>
          <el-option key="4" label="经济案件" value="经济案件"></el-option>
          <el-option key="5" label="公益案件" value="公益案件"></el-option>
          <el-option key="6" label="破产案件" value="破产案件"></el-option>
          <el-option key="7" label="法援案件" value="法援案件"></el-option>
        </el-select>

        <el-select v-model="query.status" placeholder="合同状态" class="handle-select mr10" style="width: 130px">
          <el-option key="" label="全部" value=""/>
          <el-option key="1" label="未注销" value="true"/>
          <el-option key="0" label="已注销" value="false"/>
        </el-select>

        <el-input v-model="query.lawyerName" placeholder="律师姓名" class="handle-input mr10"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>

        <el-button type="success" @click="exportToExcel" class="export-excel-wrapper">导出</el-button>
      </div>

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange">
          <!--
          type="selection"：复选框选择列（指定该列为选择列）
          type="index"：序号列（自动显示行号）
          type="expand"：可展开列（用于展示嵌套内容）-->
          <el-table-column type="selection" width="70" align="center"></el-table-column>
          <el-table-column type="index" label="序号" width="80" align="center" />
          <!--prop:指定当前列要展示的数据字段，绑定数据源（tableData）中对应的字段名-->
          <el-table-column prop="contractNumber" label="合同编号" align="center" width="100px"></el-table-column>
          <el-table-column prop="contractName" label="合同名称" align="center" width="200px"></el-table-column>
          <el-table-column prop="contractType" label="合同类型" align="center" width="100px"></el-table-column>
          <el-table-column prop="contractAmount" label="合同金额" align="center" width="100px"></el-table-column>
          <el-table-column prop="lawyerName" label="律师姓名" align="center"></el-table-column>
          <el-table-column prop="claimDate" label="领用日期" align="center" width="150px"></el-table-column>
          <el-table-column prop="operator" label="经办人" align="center" width="100px"></el-table-column>



          <!--自定义单元格内容的模板：
          <template slot-scope="scope">：vue插槽模板，用于自定义模板内容，scope 变量包含了当前行的数据和索引等信息：
          v-slot:default:表示接收表格列默认插槽传递的 scope 数据（包含当前行数据 scope.row 等）
          scope.row：表示当前行的数据对象（例如包含 status 字段）。
          scope.$index：表示当前行的索引（从 0 开始）
          -->
          <el-table-column label="状态" align="center">
            <template v-slot:default="scope">
              <!--disabled="true":设置开关状态为禁用状态，仅用于展示，用户无法切换
              v-model="scope.row.status"：双向绑定当前行的status字段，开关随着status值自动变化
              @change="chanActive(scope.row)"：开关状态变化触发chanActive方法，并传入当前行数据（没用，先预留，实际可删）
              -->
              <el-switch
                :disabled="true"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#909399" @change="chanActive(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="left" header-align="center" width="300px" ></el-table-column>

          <el-table-column fixed="right" label="合同操作" width="140" align="center">
            <template v-slot:default="scope">
              <!--type="text":按钮样式为文本按钮
              @click="handleEdit('edit',scope.row)：点击事件绑定，点击按钮时调用handledit方法，并传入两个参数
              'edit':标识当前操作类型为编辑，用于在handleEdit中区分新增和编辑
              scope.row：当前表格行的数据对象，包含该行的所有字段，如：contractNumber、contractName等，用于在表单回显
              -->
              <el-button
                type="text"
                size="small"
                icon="Edit"
                class="compact-btn"
                @click="handleEdit('edit',scope.row)">编辑</el-button>
              <!--动态禁用按钮：
              !scope.row.status：当状态为 “已注销”（status 为 false）时，按钮会被禁用（不可点击）；
              只有状态为 “正常”（status 为 true）时，按钮才可用
              意义：防止对已注销的合同重复执行注销操作，符合业务逻辑


              :disabled="..."这是 Element UI 按钮的 “禁用开关”：通用的前端规范和 HTML 标准
              当 ... 里的值是 true 时（disabled="true"），按钮会变成灰色，不能点击（禁用）
              当 ... 里的值是 false 时（disabled="false"），按钮正常，可以点击（启用）

              scope.$index：当前行的索引（在表格数据数组中的位置）
              -->
              <el-button
                :disabled="!scope.row.status"
                type="text"
                size="small"
                icon="Delete"
                class="red"
                @click="handleDelete(scope.$index,scope.row)">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div class="pagination">
        <!--current-page 是分页组件 <el-pagination> 的核心属性，用于绑定当前页码（数字类型，如 1、2、3...）。
            query.pageIndex 中的 pageIndex 是非常常见的变量命名，清晰表达了 “页码索引” 的含义
           （很多项目会用 pageIndex 而非 currentPage 来命名页码变量）。-->
        <el-pagination
          background
          layout="total,prev,pager,next"
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <!--控制弹窗显示 / 隐藏的核心属性，editVisible 是组件中定义的布尔值变量（true 显示弹窗，false 隐藏）。-->
    <!--.sync 修饰符实现双向绑定：当用户点击弹窗的关闭按钮时，会自动将 editVisible 设为 false；反之，修改 editVisible 的值也能控制弹窗显示-->
    <el-dialog title="编辑合同" draggable v-model="editVisible" width="50%">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
  <!--:model="form"：绑定表单的数据对象 form，表单中所有输入项的值都会同步到 form 对象中（如 form.contractName 对应 “合同名称” 输入框的值）
      :rules="rules"：绑定表单验证规则 rule-->
        <el-form-item label="合同编号" prop="contractNumber">
          <el-input v-model="form.contractNumber"></el-input>
        </el-form-item>
        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="form.contractName"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-select v-model="form.contractType">
            <el-option key="0" label="请选择" value=""></el-option>
            <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
            <el-option key="2" label="民事案件" value="民事案件"></el-option>
            <el-option key="3" label="行政案件" value="行政案件"></el-option>
            <el-option key="4" label="经济案件" value="经济案件"></el-option>
            <el-option key="5" label="公益案件" value="公益案件"></el-option>
            <el-option key="6" label="破产案件" value="破产案件"></el-option>
            <el-option key="7" label="法援案件" value="法援案件"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同金额" prop="contractAmount">
          <el-input v-model="form.contractAmount"></el-input>
        </el-form-item>
        <el-form-item label="律师姓名" prop="lawyerName">
          <el-input v-model="form.lawyerName"></el-input>
        </el-form-item>
        <el-form-item label="经办人" :disabled="true">
          <el-input v-model="form.operator"></el-input>
        </el-form-item>
        <el-form-item label="领用日期" prop="claimDate">
          <el-date-picker
            v-model="form.claimDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status" active-text="正常" inactive-text="已注销"></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="注销信息" v-model="dialogFormVisible" width="280px">
      <el-form ref="cancelFormRef" :model="form" :rules="rules">
        <el-form-item label="注销原因" prop="cancellationReason">
          <!--autocomplete="off" 是一个 HTML 属性，用于控制表单输入框的自动完成功能-->
          <el-input v-model="form.cancellationReason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="cancel(form)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useLoginStore } from "@/stores/login"; // 导入Pinia的登录状态管理
import {
  addContract,
  changeContractActive,
  delContract, editContract,
  getContractsByCondition
} from "@/api/contract";
import {onMounted, reactive, ref} from "vue";
import {ElForm, ElMessage} from "element-plus";
import * as XLSX from 'xlsx';// 导入xlsx库
import {AxiosResponse} from "axios";

// 定义合同数据类型
interface Contract {
  contractId: number | string;
  contractNumber?: string;
  contractType: string;
  contractName: string;
  contractAmount: number | string;
  lawyerName: string;
  claimDate: string;
  operator: string;
  status: boolean;
  remarks?: string;
  cancellationReason?: string;
}

// 定义查询参数类型
interface QueryParams {
  dataPink: [string, string] | [];
  contractType: string;
  lawyerName: string;
  beginTime: string;
  endTime: string;
  page: number;
  pageSize: number;
  status:string;
}

// 定义接口返回数据类型
interface ApiResponse<T = any> {
  code: number;
  msg: string;
  data: T;
}
const loginStore = useLoginStore();

// 表格数据相关
const tableData = ref<Contract[]>([]);
const pageTotal = ref<number>(0);

// 对话框状态
const editVisible = ref<boolean>(false);
const dialogFormVisible = ref<boolean>(false);
const title = ref<string>("编辑");

// 表单引用
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const cancelFormRef = ref<InstanceType<typeof ElForm> | null>(null);

// 导出Excel方法
const exportToExcel = () => {
  // 处理导出数据
  const exportData = tableData.value.map(item => ({
    '合同编号': item.contractNumber,
    '合同名称': item.contractName,
    '合同类型': item.contractType,
    '合同金额': item.contractAmount,
    '律师姓名': item.lawyerName,
    '领用日期': item.claimDate,
    '经办人': item.operator,
    '状态': item.status ? '正常' : '已注销'
  }));

  // 创建工作表
  const worksheet = XLSX.utils.json_to_sheet(exportData);

  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '合同信息');

  // 导出文件
  XLSX.writeFile(workbook, '合同信息.xlsx');
};

// 查询参数
const query = reactive<QueryParams>({
  dataPink: [],
  contractType: '',
  lawyerName: '',
  beginTime: '',
  endTime: '',
  page: 1,
  pageSize: 10,
  status:''
});

// 表单数据
const form = reactive<Contract>({
  contractId: '',
  contractNumber: '',
  contractType: "",
  contractName: "",
  lawyerName: "",
  contractAmount: '',
  operator: loginStore.username,
  claimDate: '',
  status: true,
  remarks: "",
  cancellationReason: ""
});


// 选择相关
const multipleSelection = ref<Contract[]>([]);
const delList = ref<(number | string)[]>([]);

// 表单验证规则
const rules = {
  contractNumber: [
    { required: true, message: '合同编号不能为空', trigger: 'blur' }
  ],
  contractName: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  contractType: [
    { required: true, message: '请选择合同类型', trigger: 'change' }
  ],
  contractAmount: [
    { required: true, message: '合同金额不能为空', trigger: 'blur' },
    { pattern: /^\d+$/, message: '合同金额必须为数字', trigger: 'blur' }
  ],
  lawyerName: [
    { required: true, message: '律师姓名不能为空', trigger: 'blur' }
  ],
  cancellationReason: [
    { required: true, message: '原因不能为空', trigger: 'blur' }
  ],
  claimDate: [ // 新增这部分！
    { required: true, message: '请选择领用日期', trigger: 'change' }, // 强制选择
    { pattern: /^\d{4}-\d{1,2}-\d{1,2}$/, message: '日期格式必须为yyyy-MM-dd', trigger: 'blur' } // 格式校验
  ]
};

// 在脚本顶部定义 ref
const dataPicker = ref<any>(null);

// 方法定义
const handleBlur = () => {
  // 在script setup中不能使用this，直接使用ref变量
  if (dataPicker.value) {
    dataPicker.value.popperVisible = false;
  }
};

const chanActive = (val: Contract) => {
  changeContractActive(val).then((res: AxiosResponse) => {
    if (res.data.code === 200) {
      if (val.status) {
        ElMessage.success("合同已启用");
      } else {
        ElMessage.info("合同已注销");
      }
    } else {
      ElMessage.error("启用/禁用失败，请稍后再试");
    }
  }).catch(() => {
    ElMessage.error("操作失败");
  });
};

const getData = () => {
  if (query.dataPink && query.dataPink.length === 2) {
    query.beginTime = query.dataPink[0];
    query.endTime = query.dataPink[1];
  } else {
    // 计算近一年的开始日期（例如：当前日期减365天）
    const oneYearAgo = new Date();
    oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
    query.beginTime = oneYearAgo.toISOString().split('T')[0]; // 格式：yyyy-MM-dd
    query.endTime = new Date().toISOString().split('T')[0]; // 格式：yyyy-MM-dd
  }

  const params = {...query};
  delete params.dataPink;

  getContractsByCondition(params).then(res=>{
    console.log(res);
    if (res.code === 200) {
      tableData.value = Array.isArray(res.data?.list) ? res.data.list : [];
      // 修复：总条数应取 res.data.total（后端返回的 total），不是 res.pageTotal
      pageTotal.value = res.data?.total || 0;
    }
  });
};

const handleSearch = () => {
  query.page = 1;
  getData();
};

const handleDelete = (index: number, row: Contract) => {
  query.dataPink = [];
  Object.assign(form, row);
  form.cancellationReason = '';
  dialogFormVisible.value = true;
};

const cancel = (formData: Contract) => {
  cancelFormRef.value?.validate((vaild) => {
    if (vaild) {
      delContract(formData).then((res: AxiosResponse) => {
        if (res.code === 200) {
          ElMessage.success('注销成功');
          dialogFormVisible.value = false;
          getData();
        } else {
          ElMessage.error('注销失败');
        }
      }).catch(() => {
        ElMessage.error('注销失败');
      });
    } else {
      //验证失败，如未填写原因
      return false;
    }
  });

};

const handleSelectionChange = (val: Contract[]) => {
  multipleSelection.value = val;
  delList.value = val.map(item => item.contractId);
};

const handleEdit = (ope: 'edit' | 'add', row?: Contract) => {
  if (ope === 'edit' && row) {
    title.value = "编辑";
    Object.assign(form, row);
  } else if (ope === 'add') {
    title.value = "添加";
    // 重置表单
    Object.assign(form, {
      contractId: '',
      contractNumber: '', // 新增时清空合同编号
      contractType: "",
      contractName: "",
      lawyerName: "",
      contractAmount: '',
      operator: loginStore.username,
      claimDate: '',
      status: true,
      remarks: "",
      cancellationReason: ""
    });
  }
  editVisible.value = true;
};

const saveEdit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      if (title.value === '编辑') {
        editContract(form).then((res: AxiosResponse) => {
          if (res.code === 200) {
            ElMessage.success("修改成功");
            editVisible.value = false;
            getData();
          } else {
            ElMessage.error("修改失败");
          }
        }).catch(() => {
          ElMessage.error("修改失败");
        });
      } else {
        addContract(form).then((res: AxiosResponse) => {
          if (res.code === 200) {
            ElMessage.success("添加成功");
            editVisible.value = false;
            getData();
          } else {
            ElMessage.error("添加失败");
          }
        }).catch(() => {
          ElMessage.error("添加失败");
        });
      }
    } else {
      ElMessage.error("请输入正确的信息");
      return false;
    }
  });
};

const handlePageChange = (val: number) => {
  query.page = val;
  getData();
};

// 生命周期钩子
onMounted(() => {
  getData();
});

</script>

<style scoped>
/* 外层容器：页面背景、整体内边距 */
.container {
  padding: 20px;
  background-color: #f9fafb;
  min-height: 100vh;
}
/* 页面标题：面包屑+标题组合 */
.crumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.crumbs h2 {
  margin: 0;
  color: #1f2329;
  font-size: 1.5rem;
}

.handle-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px; /* 控件之间的间距 */;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
  padding: 0 2px !important;
  margin: 1px !important;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.export-excel-wrapper{
  display: inline-block;
  margin-left: 5px;
}

/* 表格容器：卡片包裹、阴影 */
.table-wrapper { /* 先给模板的表格外层加这个类 */
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
/* 表格头样式：灰色背景、加粗 */
.table-header {
  background-color: #f5f7fa !important;
  font-weight: bold !important;
}
/* 表格本身：去掉默认边框，用卡片边框 */
.table {
  width: 100%;
  font-size: 14px;
  border: none !important;
}
/* 表格行hover效果（可选，目标有条纹） */
.table tbody tr:hover {
  background-color: #fafafa;
}
/* 分页：右对齐、上间距 */
.pagination {
  margin-top: 16px;
  text-align: right;
  padding: 12px 16px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}
/* 无数据提示 */
.no-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
  font-size: 14px;
}
.compact-btn {
  padding: 0 3px !important;  /* 减小内边距 */
  margin: 1px !important;       /* 去除默认外边距 */
}

</style>
